<template>
<!--  <h2 align="center" style="margin-bottom: 24px">帖子广场</h2>-->

  <!-- 搜索栏 -->
  <a-space
    align="center"
    style="width: 100%; justify-content: center; margin-bottom: 16px"
  >
    <a-input
      v-model="searchText"
      placeholder="搜索标题或内容🔍"
      style="width: 360px"
      allow-clear
      @keyup.enter="handleSearch"
    />
    <a-button type="primary" @click="handleSearch">搜索</a-button>
  </a-space>

  <!-- 卡片栅格 -->
  <a-row :gutter="[16, 16]">
    <a-col
      v-for="record in dataList"
      :key="record.id"
      :span="6"
    >
      <a-card
        hoverable
        style="display: flex; flex-direction: column; height: 100%;"
      >
        <!-- 标题 -->
        <div style="font-size: 16px; font-weight: 600; margin-bottom: 8px;">
          {{ record.title }}
        </div>

        <!-- 作者 & 时间 -->
        <div style="font-size: 12px; color: #888; margin-bottom: 12px;">
          作者：{{ record.user?.userName ?? "匿名" }}
          <span style="float: right;">
            {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm") }}
          </span>
        </div>

        <!-- 内容预览 -->
        <div
          style="flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 12px;"
        >
          {{ record.content }}
        </div>

        <!-- 标签 -->
        <div style="margin-bottom: 12px;">
          <a-tag
            v-for="tag in record.tagList || []"
            :key="tag"
            style="margin-right: 4px; margin-bottom: 4px;"
          >
            {{ tag }}
          </a-tag>
        </div>

        <!-- 操作 -->
        <a-space style="margin-top: auto;">
          <!-- 点赞 -->
          <a-button type="text" @click="toggleThumb(record)">
            <icon-thumb-up-fill
              v-if="record.hasThumb"
              style="margin-right: 4px"
            />
            <icon-thumb-up
              v-else
              style="margin-right: 4px"
            />
            {{ record.thumbNum }}
          </a-button>

          <!-- 收藏 -->
          <a-button type="text" @click="toggleFavour(record)">
            <icon-star-fill
              v-if="record.hasFavour"
              style="margin-right: 4px"
            />
            <icon-star
              v-else
              style="margin-right: 4px"
            />
            {{ record.favourNum }}
          </a-button>
        </a-space>
      </a-card>
    </a-col>
  </a-row>

  <!-- 分页 -->
  <div style="text-align: center; margin-top: 24px;">
    <a-pagination
      :current="searchParams.current"
      :page-size="searchParams.pageSize"
      :total="total"
      @change="onPageChange"
      show-total
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import dayjs from "dayjs";
import type { PostVO } from "@/api";
import { listPostVoByPageUsingPost } from "@/api/postController";
import { doThumbUsingPost } from "@/api/postThumbController";
import { doPostFavourUsingPost } from "@/api/postFavourController";
import message from "@arco-design/web-vue/es/message";
import {
  IconThumbUp,
  IconThumbUpFill,
  IconStar,
  IconStarFill,
} from "@arco-design/web-vue/es/icon";

// 搜索框
const searchText = ref("");

// 分页和数据
const searchParams = ref({ current: 1, pageSize: 8, searchText: "" });
const dataList = ref<PostVO[]>([]);
const total = ref(0);

// 获取数据
async function loadData() {
  const res = await listPostVoByPageUsingPost(searchParams.value);
  if (res.data.code === 0) {
    dataList.value = res.data.data?.records || [];
    total.value = res.data.data?.total || 0;
  } else {
    message.error("获取帖子失败：" + res.data.message);
  }
}

// 初次加载 & searchParams 改变时重新拉
watchEffect(loadData);

// 搜索
function handleSearch() {
  searchParams.value = {
    ...searchParams.value,
    current: 1,
    searchText: searchText.value.trim() || undefined,
  };
}

// 分页变化
function onPageChange(page: number) {
  searchParams.value.current = page;
}

// 点赞
async function toggleThumb(record: PostVO) {
  if (!record.id) return;
  const res = await doThumbUsingPost({ postId: record.id });
  if (res.data.code === 0) {
    const delta = res.data.data;
    record.thumbNum = (record.thumbNum ?? 0) + delta;
    record.hasThumb = !record.hasThumb;
    dataList.value = [...dataList.value];
  } else {
    message.error("点赞失败：" + res.data.message);
  }
}

// 收藏
async function toggleFavour(record: PostVO) {
  if (!record.id) return;
  const res = await doPostFavourUsingPost({ postId: record.id });
  if (res.data.code === 0) {
    const delta = res.data.data;
    record.favourNum = (record.favourNum ?? 0) + delta;
    record.hasFavour = !record.hasFavour;
    dataList.value = [...dataList.value];
  } else {
    message.error("收藏失败：" + res.data.message);
  }
}
</script>

<style scoped>
/* 可根据需要微调卡片阴影、圆角等 */
.a-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
</style>
